<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta charset="UTF-8">
    <title th:text="#{user.page.tile}">Title</title>
</head>
<body>
<!--页面标椎化-->
<div th:replace="common/common::html"></div>
<!--查询框-->
<div>
    <label sec:authorize="hasRole('ROLE_gqgy_data_user_query')" th:text="#{user.name}"></label>
    <input type="text" id="searchUserName"/>
    <label sec:authorize="hasRole('ROLE_gqgy_data_user_query')" th:text="#{user.nick}"></label>
    <input type="text" id="searchNiceName"/>
    <label sec:authorize="hasRole('ROLE_gqgy_data_user_query')" th:text="#{user.mobile}"></label>
    <input type="text" id="searchPhone"/>
    <label sec:authorize="hasRole('ROLE_gqgy_data_user_query')" th:text="#{user.email}"></label>
    <input type="text" id="searchEmail"/>
    <a sec:authorize="hasRole('ROLE_gqgy_data_user_query')" class="btn" href="#" onclick="queryBtn();">
        <i class="glyphicon glyphicon-zoom-in"></i>
        <span th:text="#{common.query}"></span>
    </a>
</div>

<!--展示数据的桌面-->
<table sec:authorize="hasRole('ROLE_gqgy_data_user_query')" id="flexigrid-id"></table>
<!--用户详细信息-->
<div id="user-detail-dialog-id" style="display: none">
    <div>
        <span th:text="#{user.name}"></span>:
        <span id="detail-user-name-id"></span>
    </div>
    <div>
        <span th:text="#{user.nick}"></span>:
        <span id="detail-user-nick-id"></span>
    </div>
    <div>
        <span th:text="#{user.mobile}"></span>:
        <span id="detail-user-mobile-id"></span>
    </div>
    <div>
        <span th:text="#{user.email}"></span>:
        <span id="detail-user-email-id"></span>
    </div>
</div>

<div id="dialog-id"></div>
<!--查看用户的菜单弹框-->
<div>
    <div id="confirm-search-user" style="display: none">
    </div>
</div>
<!--查看菜单弹框-->
<div>
    <div id="allocate-user-dialog" style="display: none">
        <span th:text="#{userMenu.search}"></span>
        <ul id="allocate-user-ztree" class="ztree">
        </ul>
    </div>
</div>
<!--添加菜单弹框-->
<div id="add-user-dialog" style="display: none">

</div>
</body>
<script th:inline="javascript">

    // 准备函数
    $(function () {
        resizePageSize();
        var _columnWidth = _gridWidth / 4;
        $("#flexigrid-id").flexigrid({
            width: _gridWidth,
            height: _gridHeight,
            url: /*[[@{/user/getUserInfolistByPage}]]*/"",
            dataType: 'json',
            colModel: [
                {display: 'userUuid', name: 'userUuid', width: 150, sortable: false, align: 'center', hide: 'true'},
                {
                    display: /*[[#{user.name}]]*/"",
                    name: 'userName',
                    width: _columnWidth,
                    sortable: true,
                    align: 'center'
                },
                {
                    display: /*[[#{user.nick}]]*/"",
                    name: 'niceName',
                    width: _columnWidth,
                    sortable: true,
                    align: 'center'
                },
                {
                    display: /*[[#{user.mobile}]]*/"",
                    name: 'mobile',
                    width: _columnWidth,
                    sortable: true,
                    align: 'center'
                },
                {
                    display: /*[[#{user.email}]]*/"",
                    name: 'email',
                    width: _columnWidth,
                    sortable: true,
                    align: 'center'
                },
                {
                    display: /*[[#{common.operation}]]*/"",
                    name: 'userUuid',
                    width: _columnWidth,
                    sortable: true,
                    align: 'center',
                    process: function (v) {
                        var html = '<a href="#" onclick="searchUserMenu(\'' + v + '\')" >查看菜单</a>';
                        html += '<span style="width: 10px;">|</span>';
                        html += '<a href="#" onclick="addUserMenu(\'' + v + '\')" >添加菜单</a>';
                        return html
                    }
                },
            ],
            resizable: false, //resizable table是否可伸缩
            useRp: true,
            usepager: true, //是否分页
            autoload: false, //自动加载，即第一次发起ajax请求
            hideOnSubmit: true, //是否在回调时显示遮盖
            showcheckbox: true, //是否显示多选框
            rowhandler: rowDbclick, //是否启用行的扩展事情功能,在生成行时绑定事件，如双击，右键等
            rowbinddata: true
        });
        $("#flexigrid-id").flexReload();
        // 展示用户详细信息
        $("#user-detail-dialog-id").dialog({
            autoOpen: false,
            width: 400,
            modal: true,
            resizable: false,
            title: /*[[#{user.info}]]*/'',
            buttons: [
                {
                    text: /*[[#{common.confirm}]]*/'',
                    click: function () {
                        $(this).dialog("close");
                    }
                }
            ]
        });

        // 分配用户角色
        $("#allocate-btn").click(function (event) {
            event.stopPropagation();
            ztree();
        });
        $("#allocate-user-dialog").dialog({
            autoOpen: false,
            width: 400,
            modal: true,
            resizable: false,
            title: /*[[#{user.role.allocate}]]*/'',
            buttons: [
                {
                    text: /*[[#{common.confirm}]]*/'',
                    click: function () {
                        var userUUid = $("#allocate-user-ztree").attr("userUUid");
                        var roleIds = [];
                        var ztreeObj = $.fn.zTree.getZTreeObj("allocate-user-ztree");
                        var nodes = ztreeObj.getCheckedNodes(true);
                        $(nodes).each(function (index, item) {
                            roleIds.push(item.id);
                        });
                        $.ajax({
                            type: 'post',
                            async: false,
                            dataType: 'json',
                            url: /*[[@{/user/allocateRoleByUser}]]*/'',
                            data: [{name: "userUuid", value: userUUid}, {name: "roleArray", value: roleIds}],
                            success: function (data) {
                                message(data.msg);
                                $("#allocate-user-dialog").dialog('close');
                            },
                            error: function (msg) {
                                message(/*[[#{common.error}]]*/'');
                            }
                        });
                    }
                },
                {
                    text: /*[[#{common.cancel}]]*/'',
                    click: function () {
                        $(this).dialog("close");
                    }
                }
            ]
        });


        // 用户添加
        $("#add-user").ajaxForm({
            dataType: "json",
            success: function (data) {
                message(data.msg);
                $("#add-user-dialog").dialog('close');
            },
            error: function () {
                message(/*[[#{common.error}]]*/'');
            },
            complete: function (response, status) {

            }
        });
        $("#add-user-dialog").dialog({
            autoOpen: false,
            width: 600,
            modal: true,
            resizable: false,
            title: '选择菜单',
        });

    });
    // 全局变量
    var allocateSetting = {
        check: {
            enable: true
        },
        data: {
            simpleData: {
                enable: true
            }
        }
    };
    var _gridWidth;
    var _gridHeight;

    // 页面自适应
    function resizePageSize() {
        _gridWidth = $(document).width() - 12;/*  -189 是去掉左侧 菜单的宽度，   -12 是防止浏览器缩小页面 出现滚动条 恢复页面时  折行的问题 */
        _gridHeight = $(document).height() - 32 - 90; /* -32 顶部主菜单高度，   -90 查询条件高度*/
    }

    // 信息提示
    function message(contents) {
        $("#dialog-id").html(contents);
        $("#dialog-id").dialog('open');
    }

    // 条件查询
    function queryBtn() {
        var searchUserName = $("#searchUserName").val();
        var searchNiceName = $("#searchNiceName").val();
        var searchPhone = $("#searchPhone").val();
        var searchEmail = $("#searchEmail").val();
        $("#flexigrid-id").flexOptions({
            extParam: [
                {name: "searchUserName", value: searchUserName},
                {name: "searchNiceName", value: searchNiceName},
                {name: "searchPhone", value: searchPhone},
                {name: "searchEmail", value: searchEmail}
            ]
        }).flexReload();

    }

    // 删除用户的提示框


    // 角色树
    function ztree() {
        var ids = $("#flexigrid-id").flexiData();
        if (ids.length !== 1) {
            message(/*[[#{common.select.one}]]*/'');
            return;
        }
        $("#allocate-user-ztree").attr("userUUid", ids);

        $.ajax({
                type: 'post',
                async: false,
                dataType: 'json',
                url: /*[[@{/user/getRoleZtreeListByUserId}]]*/'',
                data: [{name: "userUuid", value: ids}],
                success: function (data) {
                    $.fn.zTree.init($("#allocate-user-ztree"), allocateSetting, data);
                    $("#allocate-user-dialog").dialog('open');
                },
                error: function (msg) {
                    message(/*[[#{common.error}]]*/'');
                }
            }
        );
    }

    // 用户信息详情
    function rowDbclick(r) {
        $(r).dblclick(
            function () {
                var columnsArray = $(r).attr('ch').split("_FG$SP_");
                console.info(columnsArray);
                $("#detail-user-name-id").text(columnsArray[1]);
                $("#detail-user-nick-id").text(columnsArray[5]);
                $("#detail-user-mobile-id").text(columnsArray[4]);
                $("#detail-user-email-id").text(columnsArray[3]);
                $("#user-detail-dialog-id").dialog("open");
            });
    }

    // 查看用户菜单
    function searchUserMenu(userUuid) {
        $("#confirm-search-user").dialog('open')
        getUserMenu(userUuid);
    }

    //获取用户菜单
    function getUserMenu(userUuid) {
        $.ajax({
                type: 'get',
                async: false,
                dataType: 'json',
                url: /*[[@{/menu/getUserMenu}]]*/'',
                data: {userUuid: userUuid},
                success: function (data) {
                    $("#confirm-search-user").html("");
                    if (data != null) {
                        for(let i=0;i<data.length;i++){
                            var html='<span style="width:300px;align:center">'+data[i].menuName+'</span>' +
                                '<input type="button" style="float: right" onclick="deleteMenu(\''+userUuid+'\','+data[i].menuId+')" value="删除"><hr>'
                            $("#confirm-search-user").append(html);
                        }
                    }
                },
                error: function (msg) {
                    message(/*[[#{common.error}]]*/'');
                }
            }
        );
    }
    //删除菜单
    function deleteMenu(userUuid,menuId){
        $.ajax({
                type: 'post',
                async: false,
                dataType: 'json',
                url: /*[[@{/menu/delUserMenu}]]*/'',
                data: {"userUuid":userUuid,"menuId":menuId},
                success: function (data) {
                    $("#confirm-search-user").dialog("close");
                },
                error: function (msg) {
                    message('删除失败');
                }
            }
        );
    }

    // 用户菜单弹框
    $("#confirm-search-user").dialog({
        autoOpen: false,
        width: 600,
        modal: true,
        resizable: false,
        title: '用户菜单',
    });

    // 添加用户菜单
    function addUserMenu(userUuid) {
        leftMenuLoad(userUuid);
        $("#add-user-dialog").dialog('open');
    }
    //获取所有菜单
    function leftMenuLoad(userUuid) {
        $.ajax({
                type: 'post',
                async: false,
                dataType: 'json',
                url: /*[[@{/menu/getMenuTree}]]*/'',
                data: [],
                success: function (data) {
                    $("#add-user-dialog").html("");
                    for(let i=0;i<data.length;i++){
                        var html='<span style="width:300px;align:center">'+data[i].name+'</span>' +
                            '<input type="button" style="float: right" onclick="addMenu(\''+userUuid+'\','+data[i].id+')" value="添加"><hr>'
                        $("#add-user-dialog").append(html);
                    }
                },
                error: function (msg) {
                    message(/*[[#{common.error}]]*/'');
                }
            }
        );
    }
    //添加
    function addMenu(userUuid,menuId){
        $.ajax({
                type: 'post',
                async: false,
                dataType: 'json',
                url: /*[[@{/menu/setUserMenu}]]*/'',
                data: {"userUuid":userUuid,"menuId":menuId},
                success: function (data) {
                    $("#add-user-dialog").dialog("close");
                },
                error: function (msg) {
                    message('添加失败');
                }
            }
        );
    }
</script>
</html>
